<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 工具栏 -->
    <ToolBar>
      <el-row :gutter="24" class="barMarginBottom">
        <el-col :span="4" style="padding-top: 20px; margin-left: 10px">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              ><span
                class="breadcrumb-item-class"
                @click="breadcrumbItemClick(rootPath)"
                >根路径</span
              >
            </el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumbItems"
              :key="index"
              ><span
                class="breadcrumb-item-class"
                @click="breadcrumbItemClick(item.path)"
                >{{ item.name }}</span
              ></el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryForm.path"
            placeholder="请输入路径"
          ></el-input>
        </el-col>
        <el-col :span="5">
          <el-button type="default" @click="toAppointFolder"> 跳转</el-button>
          <el-button type="default" @click="uploadFile"> 上传文件</el-button>
          <el-button type="default" @click="createDir"> 创建目录</el-button>
          <el-button type="default" @click="createFile"> 创建文件</el-button>
        </el-col>
      </el-row>
    </ToolBar>
    <!-- 数据表格 -->
    <TablePage
      ref="linuxFolderPage"
      :pagination="{ onShow: false }"
      :customTableHeight="150"
      :loading.sync="loading"
      :table-data="folderTableDatas"
      :fixedHead="true"
      :columns="columns"
      :orderField="this.queryForm.orderField"
      :orderBy="this.queryForm.orderBy"
      @reloadData="loadTableData"
    />

    <!-- 上传文件 -->
    <UploadFile
      :visible.sync="uploadFileConfig.visible"
      :folderPath="uploadFileConfig.folderPath"
      :title="uploadFileConfig.title"
      @success="loadTableData"
    />

    <!-- 创建目录 -->
    <CreateDir
      :visible.sync="createDirConfig.visible"
      :folderPath="createDirConfig.folderPath"
      :title="createDirConfig.title"
      @success="loadTableData"
    />

    <!-- 创建文件 -->
    <CreateFile
      :visible.sync="createFileConfig.visible"
      :folderPath="createFileConfig.folderPath"
      :title="createFileConfig.title"
      @success="loadTableData"
    />

    <!-- 文件阅读 -->
    <ReadFile
      :title="readFileConfig.title"
      :visible.sync="readFileConfig.visible"
      :folderPath="readFileConfig.folderPath"
      :fileName="readFileConfig.fileName"
    />
  </PageCard>
</template>
<script>
import PageCard from "@/components/PageCard/index.vue";
import TablePage from "@/components/TablePage/index.vue";
import ToolBar from "@/components/ToolBar/index.vue";

import UploadFile from "../components/uploadFile.vue";
import CreateDir from "../components/createDir.vue";
import CreateFile from "../components/createFile.vue";
import ReadFile from "../components/readFile.vue";

import { folderList, deleteDir } from "@/api/linux/folder";
import { deleteFile } from "@/api/linux/file";

export default {
  name: "LinuxFolderPage",
  components: {
    PageCard,
    TablePage,
    ToolBar,
    UploadFile,
    CreateDir,
    CreateFile,
    ReadFile,
  },
  data() {
    return {
      queryForm: null,
      initForm: {
        path: "",
        fileName: "",
        orderField: "isFolder",
        orderBy: "desc",
      },
      loading: false,
      folderTableDatas: [],
      breadcrumbItems: [],
      rootPath: "root",
      uploadFileConfig: {
        folderPath: null,
        title: "",
        visible: false,
      },
      createDirConfig: {
        folderPath: null,
        title: "",
        visible: false,
      },
      createFileConfig: {
        folderPath: null,
        title: "",
        visible: false,
      },
      readFileConfig: {
        title: "",
        visible: false,
        fileName: "",
        folderPath: "",
      },
      columns: [
        {
          title: "名称",
          name: "fileName",
          width: 250,
          align: "left",
          ellipsis: true,
          fixed: "left",
          link: true,
          linkClick: (row) => {
            this.showNext(row);
          },
          iconName: (row) => {
            return row.isFolder ? "folder" : "file";
          },
          iconSize: 2.5,
          columnTextStyle: "display:flex;",
          cellTextStyle: "line-height: 40px; margin-left: 10px",
        },
        {
          title: "创建时间",
          name: "createTime",
          width: 200,
          sortable: true,
          align: "center",
        },
        {
          title: "修改时间",
          name: "modifyTime",
          sortable: true,
          width: 200,
          align: "center",
        },
        {
          title: "操作",
          name: "operate",
          width: 150,
          operate: [
            {
              name: "删除",
              fun: this.deleteCurrentFile,
              color: "#F56C6C",
              customStyle: {
                "margin-left": "10px",
              },
              permission: "DeleteFolderFile",
              onShow: (row) => {
                return row.isFolder !== 1;
              },
            },
            {
              name: "删除",
              fun: this.deleteCurrentFolder,
              color: "#F56C6C",
              customStyle: {
                "margin-left": "10px",
              },
              permission: "DeleteFolderFile",
              onShow: (row) => {
                return row.isFolder === 1;
              },
            },
            {
              name: "查阅",
              fun: this.readFileInfo,
              color: "#409EFF",
              customStyle: {
                "margin-left": "10px",
              },
              permission: "DockerReadFile",
              onShow: (row) => {
                return row.isFolder !== 1;
              },
            },
          ],
        },
      ],
    };
  },
  created() {
    this.queryForm = { ...this.initForm };
    this.queryForm.path = "/" + this.rootPath;
    this.$nextTick(() => {
      this.loadTableData();
    });
  },
  methods: {
    // 加载文件列表信息
    async loadTableData() {
      const { data } = await folderList({ ...this.queryForm });
      this.folderTableDatas = data;
    },

    // 点击文件或目录
    async showNext(row) {
      console.log(row);
      if (!row.isFolder) {
        console.log("click file");
      } else {
        // 下一级目录信息
        const toPath = this.queryForm.path.concat("/" + row.fileName);
        this.breadcrumbItemClick(toPath);
      }
    },

    // 跳转目录
    async breadcrumbItemClick(path) {
      this.breadcrumbItems = [];
      const paths = path.split("/");
      if (paths && paths.length > 1) {
        let currentPath = "/" + this.rootPath;
        paths.forEach((path) => {
          if (
            path &&
            path.trim() !== "" &&
            path.trim() !== "/" &&
            path !== this.rootPath
          ) {
            currentPath = currentPath.concat("/" + path);
            this.breadcrumbItems.push({
              name: path,
              path: currentPath,
            });
          }
        });
      } else {
        path = "/" + path;
      }
      this.queryForm.path = path;
      await this.loadTableData();
    },

    // 跳转到指定目录
    toAppointFolder() {
      if (!this.queryForm.path || this.queryForm.path.trim() === "") {
        this.queryForm.path = this.rootPath;
      }
      this.breadcrumbItemClick(this.queryForm.path);
    },

    // 上传文件
    uploadFile() {
      this.uploadFileConfig.folderPath = this.queryForm.path;
      this.uploadFileConfig.title = "上传文件";
      this.uploadFileConfig.visible = true;
    },

    // 创建目录
    createDir() {
      this.createDirConfig.folderPath = this.queryForm.path;
      this.createDirConfig.title = "创建目录";
      this.createDirConfig.visible = true;
    },

    // 创建文件
    createFile() {
      this.createFileConfig.folderPath = this.queryForm.path;
      this.createFileConfig.title = "创建文件";
      this.createFileConfig.visible = true;
    },

    // 删除文件
    async deleteCurrentFile(row) {
      this.$confirm("确定删除文件【" + row.fileName + "】吗？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = {
            filePath: this.queryForm.path,
            fileName: row.fileName,
          };
          await deleteFile(data);
          this.loadTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    // 删除目录
    async deleteCurrentFolder(row) {
      this.$confirm("确定删除目录【" + row.fileName + "】吗？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = {
            dirPath: this.queryForm.path,
            dirName: row.fileName,
          };
          await deleteDir(data);
          this.loadTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    // 文件查阅
    readFileInfo(row) {
      this.readFileConfig.title = "查阅";
      this.readFileConfig.fileName = row.fileName;
      this.readFileConfig.folderPath = this.queryForm.path;
      this.readFileConfig.visible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.breadcrumb-item-class {
  cursor: pointer;
}
.breadcrumb-item-class:hover {
  color: #409eff;
  border-bottom: 1px solid #409eff;
}
</style>
